<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="description" content="FOREVER - Responsive HTML Wedding Template">
    <META NAME="ROBOTS" CONTENT="NOINDEX">
    <title>FOREVER</title>

    <link rel="icon" href="images/favicon.jpg">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" type="text/css" media="screen" />
    <!-- Pace -->
    <link rel="stylesheet" href="css/preloader.css" media="screen">
    <link rel="stylesheet" href="css/preloader-default.css" media="screen">
    <!-- Flexslider -->
    <link rel="stylesheet" href="css/flexslider/flexslider.css" type="text/css">
    <!-- Animate -->
    <link rel="stylesheet" href="css/animate/animate.css" type="text/css">
    <!-- Countdown -->
    <link rel="stylesheet" href="css/countdown/jquery.countdown.css" type="text/css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="css/magnific-popup/magnific-popup.css" type="text/css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="css/owlcarousel/owl.carousel.css" type="text/css">
    <link rel="stylesheet" href="css/owlcarousel/owl.theme.css" type="text/css">
    <!-- Icon -->
    <link rel="stylesheet" href="css/fonts/fontello/css/fontello.css" type="text/css" media="screen" />
    <!-- Font -->
    <!-- <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> -->
    <!-- <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'> -->
    <!-- <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> -->
    <!-- Slidebars -->
    <link rel="stylesheet" href="css/slidebars/slidebars.css" type="text/css" media="screen" />

    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet" media="screen">
    <!-- Font -->
    <style>
        @font-face {
            font-family: "Oswald";
            src: url(./rsc/Oswald-Regular.ttf);
        }
        @font-face {
            font-family: "Arvo";
            src: url(./rsc/Arvo-Regular.ttf);
        }
        @font-face {
            font-family: "Pacifico";
            src: url(./rsc/Pacifico-Regular.ttf);
        }
    </style>

</head>

<body>
    <!--PRELOADER-->
    <div id="preloader">

        <div class="alignment">
            <div class="v-align center-middle">

                <!-- LEFT HEART -->
                <div class="heart-animation">
                    <i class="de-icon-heart"></i>
                </div>

                <!-- RIGHT HEART -->
                <div class="heart-animation-reverse">
                    <i class="de-icon-heart"></i>
                </div>

            </div>
        </div>

    </div>
    <!--END of PRELOADER-->

    <!-- SIDE NAVBAR -->
    <nav class="sb-slidebar sb-right sb-style-push">

        <div id="side-navbar-header">

            <div id="logo-inner-wrapper">
                <!-- LOGO -->
                <div class="logo-wrapper">
                    <!-- CSS LOGO -->
                    <a href="index.html">
                        <div class="css-logo rounded">
                            <div class="css-logo-text">
                                <strong>程</strong><i class="de-icon-heart-1"></i><strong>张</strong>
                            </div>
                        </div>
                    </a>

                    <!-- IMG LOGO 
                        <a href="index.html">
                    		<div class="img-logo">
                    			<img src="images/slide1.jpg">
                    		</div>
                        </a>
                        -->
                </div>
                <!-- END of LOGO -->
            </div>

            <div id="close-inner-wrapper">
                <a href="#" id="close-button"><i class="de-icon-cancel-2"></i></a>
            </div>

        </div>

        <ul id="side-nav-menu">
            <li>
                <a href="#">主页</a>
            </li>
            <li>
                <a href="#">关于</a>
                <ul>
                    <li>
                        <a href="#">关于他</a>
                    </li>
                    <li>
                        <a href="#">关于她</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">相册</a>
            </li>
            <li><a href="#">故事</a></li>
            <li>
                <a href="#">婚礼</a>
                <ul>
                    <li><a href="#">地点</a></li>
                    <li>
                        <a href="#">伴郎</a>
                    </li>
                    <li>
                        <a href="#">伴娘</a>
                    </li>
                    <li><a href="#">随份子</a></li>
                </ul>
            </li>
        </ul>

    </nav>
    <!-- END of SIDE NAVBAR -->



    <!-- SLIDEBAR CONTENT WRAPPER -->
    <div id="sb-site">

        <!-- NAVIGATION -->
        <header>
            <nav id="menuicon-bar" class="fluid-width menuicon-right">

                <!-- LOGO -->
                <div class="logo-outter-wrapper">
                    <div class="logo-wrapper">
                        <!-- CSS LOGO -->
                        <a href="index.html">
                            <div class="css-logo rounded">
                                <div class="css-logo-text">
                                    <strong>程</strong><i class="de-icon-heart-1"></i><strong>张</strong>
                                </div>
                            </div>
                        </a>

                        <!-- IMG LOGO 
                        <a href="index.html">
                    		<div class="img-logo">
                    			<img src="images/slide1.jpg">
                    		</div>
                        </a>
                        -->
                    </div>
                </div>
                <!-- END of LOGO -->

                <!-- MENU ICON -->
                <div id="menu-icon" class="white">
                    <a href="#" class="sb-toggle-right">
                        <i class="de-icon-menu"></i>
                    </a>
                </div>

                <!-- RESET FLOAT -->
                <div class="clearboth"></div>

                <!-- STICKY MENU ICON -->
                <div id="sticky-menuicon">
                    <a href="#" class="sb-toggle-right">
                        <i class="de-icon-menu"></i>
                    </a>
                </div>

            </nav>

        </header>
        <!-- END of NAVIGATION -->


        <!-- MAIN SLIDER -->
        <section id="main-slider" class="flexslider fullscreen">

            <!-- MAIN SLIDER TITLE OUTTER WRAPPER -->
            <div class="slide-title-outter-wrapper">

                <!-- MAIN SLIDER TITLE INNER WRAPPER -->
                <div class="slide-title-inner-wrapper">

                    <!-- TITLE -->
                    <div class="slide-title align-middle">

                        <div class="container">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-6 animation delay1 fadeInUp">

                                    <div id="save-the-date">
                                        <div id="save">Save</div>
                                        <div id="the-date">The Date</div>
                                        <div id="date">- 21<span class="pink-dot">.</span>08<span
                                                class="pink-dot">.</span>23 -</div>
                                    </div>
                                    <div class="banner-text light medium" style="letter-spacing:3px">
                                        <h4> 我们结婚了 </h4>
                                    </div>
                                    <div class="heart-divider">
                                        <span class="white-line" style="width:10px"></span>
                                        <i class="de-icon-heart pink-heart"></i>
                                        <i class="de-icon-heart white-heart"></i>
                                        <span class="white-line" style="width:10px"></span>
                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- END of MAIN SLIDER TITLE INNER WRAPPER -->

            </div>
            <!-- END of MAIN SLIDER TITLE OUTTER WRAPPER -->

            <!-- MAIN SLIDER IMAGES -->

            <ul class="slides">


                <li>
                    <!-- SLIDE IMAGE -->
                    <div data-stellar-ratio="0.5" class="slide-image"
                        style="background-image:url(image/silde_1.jpg);">
                    </div>

                    <!-- SLIDE OVERLAY -->
                    <div class="slide-overlay" style="opacity:0.2"> </div>

                </li>


                <li>
                    <!-- SLIDE IMAGE -->
                    <div data-stellar-ratio="0.5" class="slide-image"
                        style="background-image:url(image/slide_2.jpg);">
                    </div>

                    <!-- SLIDE OVERLAY -->
                    <div class="slide-overlay" style="opacity:0.2"> </div>
                </li>

            </ul>
            <!-- END of MAIN SLIDER IMAGES -->

        </section>
        <!-- ENF of MAIN SLIDER -->



        <!--CONTENT SECTION-->
        <section id="content">

            <!--COUPLE SECTION-->
            <section id="couple">

                <div class="container">
                    <div class="row">

                        <!-- SECTION TITLE -->
                        <div class="col-md-offset-1 col-md-10 text-center">

                            <div class="section-title animation fadeInUp">
                                <h1>
                                    一 对 新 人
                                </h1>

                                <p class="blurb">
                                </p>

                                <div class="heart-divider">
                                    <span class="grey-line"></span>
                                    <i class="de-icon-heart pink-heart"></i>
                                    <i class="de-icon-heart grey-heart"></i>
                                    <span class="grey-line"></span>
                                </div>
                            </div>
                        </div>

                        <!-- SECTION CONTENT -->
                        <div class="col-md-offset-1 col-md-5">

                            <!--PHOTO-ITEM-->
                            <div class="photo-item animation fadeInLeft">

                                <!--HIS-PHOTO-->
                                <img src="image/him_square.jpg" alt="" class="hover-animation image-zoom-in">

                                <!--PHOTO OVERLAY-->
                                <div class="layer wh95 hidden-black-overlay hover-animation fade-in">
                                </div>
                                <!--END of PHOTO OVERLAY-->

                                <!--PHOTO CAPTION-->
                                <div class="layer wh95 border-photo-caption hover-animation fade-out">
                                    <div class="alignment">
                                        <div class="v-align center-bottom">

                                            <div>
                                                <div class="banner-text light small" style="letter-spacing:3px;">
                                                    <h4>*** 新郎 ***</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--END of PHOTO CAPTION-->


                                <!--ICON LINK-->
                                <div class="layer wh100 hidden-link hover-animation delay1 fade-in">
                                    <div class="alignment">
                                        <div class="v-align center-middle">

                                            <a href="profile-him.html" class="de-button outline medium">
                                                关于他
                                            </a>

                                        </div>
                                    </div>
                                </div>
                                <!--END of ICON LINK-->

                            </div>
                            <!--END of PHOTO-ITEM-->

                            <p class="couple-excerpt animation fadeInLeft">
                                <strong>我是程光鑫</strong></p>

                        </div>

                        <div class="col-md-5">

                            <!--PHOTO-ITEM-->
                            <div class="photo-item animation fadeInRight">

                                <!--HER-PHOTO-->
                                <img src="image/her_square.jpg" alt="" class="hover-animation image-zoom-in">

                                <!--PHOTO OVERLAY-->
                                <div class="layer wh95 hidden-black-overlay hover-animation fade-in">
                                </div>
                                <!--END of PHOTO OVERLAY-->

                                <!--PHOTO CAPTION-->
                                <div class="layer wh95 border-photo-caption hover-animation fade-out">
                                    <div class="alignment">
                                        <div class="v-align center-bottom">

                                            <div>
                                                <div class="banner-text light small" style="letter-spacing:3px;">
                                                    <h4>*** 新娘 ***</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--END of PHOTO CAPTION-->

                                <!--ICON LINK-->
                                <div class="layer wh95 hidden-link hover-animation delay1 fade-in">
                                    <div class="alignment">
                                        <div class="v-align center-middle">

                                            <a href="profile-her.html" class="de-button outline medium">
                                                关于她
                                            </a>

                                        </div>
                                    </div>
                                </div>
                                <!--END of ICON LINK-->

                            </div>
                            <!--END of PHOTO-ITEM-->

                            <p class="couple-excerpt animation fadeInRight">
                                <strong>我是张慧</strong></p>

                        </div>
                    </div>
                </div>
            </section>


            <!-- LOCATION & COUNTDOWN SECTION -->
            <section id="location-countdown">
                <div class="image-divider auto-height" style="background-image:url(image/location_beautify.jpg);"
                    data-stellar-background-ratio="0.5">

                    <div class="divider-overlay"></div>

                    <!-- Use Center Middle Alignment to align middle the content for fixed-height parallax
                    <div class="alignment"> 
                    	<div class="v-align center-middle"> -->

                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-10 text-center">

                                <div class="banner-text light medium animation fadeInUp" style="letter-spacing:3px;">
                                    <h4> 云上天经大酒店(机场路店)二楼宴会厅 </h4>
                                </div>

                                <div class="animation fadeInUp">
                                    <div id="counting-down">
                                        <div id="counting">Counting</div>
                                        <div id="down">Down</div>
                                    </div>
                                </div>

                                <div class="heart-divider animation fadeInUp">
                                    <span class="white-line"></span>
                                    <i class="de-icon-heart pink-heart"></i>
                                    <i class="de-icon-heart white-heart"></i>
                                    <span class="white-line"></span>
                                </div>

                                <div id="sinceCountdown" class="simple-countdown countdown-amount animation fadeInUp"></div>

                            </div>
                        </div>
                    </div>

                    <!--</div>
                   	</div>-->

                </div>
            </section>


            <!-- THE WEDDING SECTION -->
            <section id="the-wedding">

                <div class="container">

                    <!-- ROW-1 -->
                    <div class="row">

                        <!-- SECTION TITLE -->
                        <div class="col-md-12 text-center">

                            <div class="section-title animation fadeInUp">
                                <h2>
                                    婚礼
                                </h2>

                                <p class="blurb"></p>

                                <div class="heart-divider">
                                    <span class="grey-line"></span>
                                    <i class="de-icon-heart pink-heart"></i>
                                    <i class="de-icon-heart grey-heart"></i>
                                    <span class="grey-line"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END of ROW-1 -->


                    <!-- ROW-2 -->
                    <div class="row">

                        <div class="col-md-offset-1 col-md-10">

                            <div class="container-fluid">
                                <div class="row">

                                    <!-- ITEM-1 -->
                                    <div class="wedding-item col-md-4 animation fadeIn">

                                        <!--PHOTO-ITEM-->
                                        <div class="photo-item">

                                            <!--PHOTO-->
                                            <img src="image/location_beautify_square.jpg" alt=""
                                                class="hover-animation image-zoom-in">

                                            <!--PHOTO OVERLAY-->
                                            <div class="layer wh95 hidden-black-overlay hover-animation fade-in">
                                            </div>
                                            <!--END of PHOTO OVERLAY-->

                                            <div class="layer wh95 border-photo-caption fade-out">
                                            </div>
                                            <!--END of PHOTO CAPTION-->

                                            <!--ICON LINK-->
                                            <div class="layer wh100 hidden-link hover-animation delay1 fade-in">
                                                <div class="alignment">
                                                    <div class="v-align center-middle">

                                                        <a href="https://map.baidu.com/poi/%E4%BA%91%E4%B8%8A%E5%A4%A9%E7%8E%BA%E5%A4%A7%E9%85%92%E5%BA%97(%E6%9C%BA%E5%9C%BA%E8%B7%AF%E5%BA%97)/@13048991.381602451,4390183.129614711,13.26z?uid=4421ab43080b918238e4a697&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&querytype=detailConInfo&da_src=shareurl" class="de-button outline small">
                                                            到这里
                                                        </a>

                                                    </div>
                                                </div>
                                            </div>
                                            <!--END of ICON LINK-->

                                        </div>
                                        <!--END of PHOTO-ITEM-->

                                        <!-- TITLE & EXCERPT -->
                                        <div class="title-excerpt">
                                            <h3><a href="https://map.baidu.com/poi/%E4%BA%91%E4%B8%8A%E5%A4%A9%E7%8E%BA%E5%A4%A7%E9%85%92%E5%BA%97(%E6%9C%BA%E5%9C%BA%E8%B7%AF%E5%BA%97)/@13048991.381602451,4390183.129614711,13.26z?uid=4421ab43080b918238e4a697&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&querytype=detailConInfo&da_src=shareurl">地点</a></h3>
                                            <p></p>
                                        </div>
                                        <!-- END of TITLE & EXCERPT -->

                                    </div>
                                    <!-- END of ITEM-1 -->


                                    <!-- ITEM-2 -->
                                    <div class="wedding-item col-md-4 animation delay1 fadeIn">

                                        <!--PHOTO-ITEM-->
                                        <div class="photo-item">

                                            <!--PHOTO-->
                                            <img src="images/the-wedding-4a.jpg" alt=""
                                                class="hover-animation image-zoom-in">

                                            <!--PHOTO OVERLAY-->
                                            <div class="layer wh95 hidden-black-overlay hover-animation fade-in">
                                            </div>
                                            <!--END of PHOTO OVERLAY-->

                                            <div class="layer wh95 border-photo-caption fade-out">

                                            </div>
                                            <!--END of PHOTO CAPTION-->

                                            <!--ICON LINK-->
                                            <div class="layer wh100 hidden-link hover-animation delay1 fade-in">
                                                <div class="alignment">
                                                    <div class="v-align center-middle">

                                                        <a href="#" class="de-button outline small">
                                                            礼品登记
                                                        </a>

                                                    </div>
                                                </div>
                                            </div>
                                            <!--END of ICON LINK-->

                                        </div>
                                        <!--END of PHOTO-ITEM-->

                                        <!-- TITLE & EXCERPT -->
                                        <div class="title-excerpt">
                                            <h3><a href="#">礼品登记</a></h3>
                                            <p></p>
                                        </div>
                                        <!-- END of TITLE & EXCERPT -->

                                    </div>
                                    <!-- END of ITEM-2 -->


                                    <!-- ITEM-3 -->
                                    <div class="wedding-item col-md-4 animation delay2 fadeIn">

                                        <!--PHOTO-ITEM-->
                                        <div class="photo-item">

                                            <!--PHOTO-->
                                            <img src="images/accomodation.jpg" alt=""
                                                class="hover-animation image-zoom-in">

                                            <!--PHOTO OVERLAY-->
                                            <div class="layer wh95 hidden-black-overlay hover-animation fade-in">
                                            </div>
                                            <!--END of PHOTO OVERLAY-->

                                            <div class="layer wh95 border-photo-caption fade-out">

                                            </div>
                                            <!--END of PHOTO CAPTION-->

                                            <!--ICON LINK-->
                                            <div class="layer wh100 hidden-link hover-animation delay1 fade-in">
                                                <div class="alignment">
                                                    <div class="v-align center-middle">
                                                        <a href="#" class="de-button outline small">
                                                            住宿安排
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--END of ICON LINK-->

                                        </div>
                                        <!--END of PHOTO-ITEM-->

                                        <!-- TITLE & EXCERPT -->
                                        <div class="title-excerpt">
                                            <h3><a href="#">住宿安排</a></h3>
                                            <p></p>
                                        </div>
                                        <!-- END of TITLE & EXCERPT -->

                                    </div>
                                    <!-- END of ITEM-3 -->

                                </div>


                            </div>

                        </div>
                    </div>
                    <!-- END of ROW-2 -->

                </div>
                <!-- END of CONTAINER -->

            </section>

        </section>

        <!-- FOOTER SECTION -->
        <footer>
            <div class="image-divider fixed-height" style="background-image:url(image/footer.jpg);"
                data-stellar-background-ratio="0.5">

                <div class="divider-overlay"></div>

                <!-- Use Center Middle Alignment to align middle the content for fixed-height parallax -->
                <div class="alignment">
                    <div class="v-align center-middle">

                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">

                                    <div class="animation fadeInUp">
                                        <div id="thank-you">
                                            <div id="thank">Thank</div>
                                            <div id="you">You</div>
                                        </div>
                                    </div>

                                    <div class="heart-divider animation delay1 fadeInUp">
                                        <span class="white-line"></span>
                                        <i class="de-icon-heart pink-heart"></i>
                                        <i class="de-icon-heart white-heart"></i>
                                        <span class="white-line"></span>
                                    </div>

                                    <div id="footer-couple-name" class="animation delay1 fadeInUp">
                                        程光鑫 & 张慧
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </footer>

    </div>
    <!-- END of SLIDEBAR CONTENT WRAPPER -->
    <!-- jQuery -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- Pace -->
    <script src="js/pace/pace.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap/bootstrap.js"></script>
    <!-- Modernizr -->
    <script src="js/modernizr/modernizr.js"></script>
    <!-- Device JS -->
    <script src="js/devicejs/device.js"></script>
    <!-- TinyNav -->
    <script src="js/tinynav/tinynav.min.js"></script>
    <!-- SmoothScroll -->
    <script src="js/smoothscroll/jquery.smooth-scroll.js"></script>
    <!-- Flexslider -->
    <script src="js/flexslider/jquery.flexslider.js"></script>
    <!-- Sticky -->
    <script src="js/sticky/jquery.sticky.js"></script>
    <!-- Waypoint -->
    <script src="js/waypoint/jquery.waypoints.min.js"></script>
    <!-- DoubleTapToGo -->
    <script src="js/jquery-ui-widget/jquery.ui.widget.js"></script>
    <script src="js/jquery-doubletaptogo/jquery.dcd.doubletaptogo.js"></script>
    <!-- Vide -->
    <script src="js/vide/jquery.vide.js"></script>
    <!-- Stellar -->
    <script src="js/stellar/jquery.stellar.js"></script>
    <!-- Masonry -->
    <script src="js/masonry/masonry.pkgd.min.js"></script>
    <!-- Countdown -->
    <script src="js/countdown/jquery.plugin.js"></script>
    <script src="js/countdown/jquery.countdown.js"></script>
    <script>
        $(function () {
            var austDay = new Date();
            var nowDay = new Date();
            austDay = new Date(2021, 7, 23, 11, 08);
            if (austDay.getTime() >= nowDay.getTime()) {
                $('#sinceCountdown').countdown({ until: austDay });
            }
            else {
                $('#sinceCountdown').countdown({ since: austDay });
            }
            console.log(austDay.getFullYear())
        });
    </script>
    <!-- Countdown Labels / Localisation -->
    <script src="js/countdown/jquery.countdown-custom-label.js"></script>
    <!-- Magnific Popup -->
    <script src="js/magnific-popup/jquery.magnific-popup.js"></script>
    <!-- Owl Carousel -->
    <script src="js/owlcarousel/owl.carousel.js"></script>
    <!-- Slidebars -->
    <script src="js/slidebars/slidebars.js"></script>

    <!-- Custom Core Script -->
    <script type="text/javascript" src="js/script.js"></script>
    <!-- Custom Additional Script -->
    <script type="text/javascript" src="js/main-slider-fade.js"></script>
    <script type="text/javascript" src="js/side-navbar.js"></script>

</body>

</html>